<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
        <style type="text/css">
            h3 { text-align: center ; }
            .wrapper { margin: auto ; border: 1px solid gray; width: 80vw; }
            .list { margin: 10px; border: 1px solid blue ; }
            .item { display: flex; justify-content: space-between ; line-height: 50px; }
            .item>span { flex-basis: 25%; text-align: center; }
            .item>span a { cursor: pointer; user-select: none; color: blue; }
            .edit { margin: 10px; border: 1px solid green; }
        </style>
    </head>
    <body>
        <h3>指令: v-for</h3>

        <div class="wrapper"></div>

        <script src="vue.global.js" type="text/javascript"></script>

        <script type="text/javascript">
            const options = {
                // 模板
                template: `<div class="list">
                               <div class="item" v-for="book in books" v-bind:key="book.id">
                                  <span>{{ book.name }}</span>
                                  <span>{{ book.author }}</span>
                                  <span>{{ book.price }}</span>
                                  <span>
                                    <a v-on:click="remove(book.id)">删除</a>
                                  </span>
                               </div>
                           </div>
                           <div class="edit">
                               <input type="text" v-model="name" placeholder="书名">
                               <input type="text" v-model="author" placeholder="作者">
                               <input type="number" v-model="price" placeholder="价格">
                               <button v-on:click="add">添加</button>
                           </div>` ,
                // 数据
                data(){
                    return {
                        name: '',
                        author: '' ,
                        price: '' ,
                        books: [
                            { id: 1234 , name: 'Vue从入门到放弃' , author: '小姜' , price: 98 } ,
                            { id: 4321 , name: 'Vue从没入门到放弃' , author: '佚名' , price: 88 },
                            { id: 5678 , name: 'Vue从入门到精通' , author: 'RespJone' , price: 108 }
                        ]
                    }
                },
                // 方法
                methods: {
                    remove(id){
                        console.log('id: ' , id);
                        // 根据参数指定的函数寻找首个满足条件的元素的索引
                        let index = this.books.findIndex( b => b.id == id );
                        if( index != -1 ) {
                            this.books.splice( index , 1 );
                        }
                    },
                    add(){

                        let reducer = (prev,curr) =>{
                           if( prev > curr.id ) {
                               return prev ;
                           }
                           return curr.id ;
                        }

                        let maxId = this.books.reduce( reducer , 0 );

                        let book = {
                            id: maxId + 1 ,
                            name: this.name ,
                            author: this.author ,
                            price: this.price
                        }

                        console.log( book );

                        this.books.push( book );
                        this.name = '';
                        this.author = '';
                        this.price = '' ;
                    }
                }
            }
            const application = Vue.createApp(options);
            console.log( application );
            const instance = application.mount('.wrapper');
            console.log( instance );
        </script>
    </body>
</html>